<template>
  <div class="charge-container">
    <template>
      <el-table :data="vipList" border style="width: 100%">
        <el-table-column align="center" label="产品图片" width="130">
          <!-- 插槽作用域 -->
          <template v-slot="{ row }">
            <el-avatar
              shape="square"
              :size="80"
              fit="scale-down"
              :src="row.imageUrl"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          prop="productName"
          align="center"
          label="产品名称"
        ></el-table-column>
        <el-table-column
          prop="description"
          align="center"
          label="产品描述"
        ></el-table-column>
        <el-table-column
          prop="price"
          align="center"
          label="价格(元)"
        ></el-table-column>
        <el-table-column
          prop="inventory"
          align="center"
          label="库存"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              @click="pre_order(row)"
              icon="iconfont icon-vip3"
            >
              充值
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
import * as api from "@/api/transaction";
export default {
  data() {
    return {
      vipList: [],
    };
  },
  meta: {
    title: "vipCharge",
    icon: "iconfont icon-chongzhi", //存菜单对应的图标的类名
    name: "充值中心",
  },
  created() {
    this.getVipList();
  },
  methods: {
    pre_order(row) {
      //获得当前这一行的product_id 产品id
      console.log(row);
      let { product_id } = row;

      // this.$confirm  提示
      this.$confirm(
        "您正在购买" +
          row.description +
          "请确认您已经满18岁,并且具备购买能力,是否确定购买?",
        "购买提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "success",
        }
      )
        .then(() => {
          //点了确定
          //跳转到预支付页面
          this.$router.push({ path: "/preorder", query: { product_id } });
        })
        .catch(() => {
          //点了取消
          this.$message({
            type: "error",
            message: "已取购买",
          });
        });
    },

    getVipList() {
      api.getVipListApi().then((res) => {
        console.log(res.data);
        this.vipList = res.data.data;
      });
    },
  },
};
</script>
<style scoped lang="less">
.el-avatar {
  /deep/ img {
    width: 100%;
  }

  height: 30px !important;
  background-color: #fff;
}

.el-button--primary {
  background-color: #05a000;
}
</style>
